<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
 	String path = request.getContextPath();
 	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 	request.setAttribute("path", path);
 	request.setAttribute("jsPath", path+"/js");
 	request.setAttribute("cssPath", path+"/css");
 	request.setAttribute("imagePath", path+"/image");
 %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head lang="en">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>系统角色</title>

  <!-- 页面js调用部分 -->
<!-- Mainly scripts -->
<!-- <script src="/js/jquery-2.1.1.min.js"></script> -->
<script src="/js/bootstrap.min.js?v=3.4.0"></script>
<script src="/js/jquery.metisMenu.js"></script>
<script src="/js/jquery.slimscroll.min.js"></script>
<script src="/js/hplus.js?v=2.2.0"></script>
<script src="/js/pace.min.js"></script>


<!-- 树形文件 css&js -->
   <!--  <script type="text/javascript" src=" /js/jquery-1.7.2.js"></script> -->
    
	<link rel="stylesheet" type="text/css" href="/css/zTreeStyle/zTreeStyle.css"/>
    <link rel="stulesheet" type="text/css" href="/css/awesomeStyle/awesome.css"/>
    <link rel="stulesheet" type="text/css" href="/css/awesomeStyle/awesome.less"/>
    <link rel="stulesheet" type="text/css" href="/css/awesomeStyle/fa.less"/>
    <link rel="stylesheet" type="text/css" href="/css/metroStyle/metroStyle.css"/>
   
    <link rel="stylesheet" href="/css/demo.css" type="text/css">
	<script type="text/javascript" src="/js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="/js/jquery.ztree.core.js"></script>
	<script type="text/javascript" src="/js/jquery.ztree.excheck.js"></script>
	<script type="text/javascript" src="/js/jquery.ztree.exedit.js"></script> 
	<!-- 树形文件 -->
	
	<!-- zyTable --> 
	<link rel="stylesheet" type="text/css" href="/plugs/bootstrap-ui/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="/plugs/button/css/component.css">
	<link rel="stylesheet" type="text/css" href="/plugs/checkbox/style.css">
	
			
	<!-- 加载zyPopup弹出层的样式 -->
	<link rel="stylesheet" type="text/css" href="/plugs/zyPopup/plug/DialogEffects/css/demo.css"/>
	<link rel="stylesheet" type="text/css" href="/plugs/zyPopup/plug/DialogEffects/css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="/plugs/zyPopup/plug/DialogEffects/css/dialog.css" />
	<link rel="stylesheet" type="text/css" href="/plugs/zyPopup/plug/DialogEffects/css/dialog-sandra.css" />
	<link rel="stylesheet" type="text/css" href="/plugs/zyPopup/css/zyPopup.css" />		
	<link rel="stylesheet" type="text/css" href="/css/table.css">
	<!-- 引用公共JS -->
		
	<script type="text/javascript" src="/plugs/paging/js/jquery.pagination.js"></script>
			
	<!-- 加载zyPopup弹出层的脚本 -->
	<script type="text/javascript" src="/plugs/zyPopup/plug/DialogEffects/js/modernizr.custom.js"></script>
	<script type="text/javascript" src="/plugs/zyPopup/plug/DialogEffects/js/classie.js"></script>
	<script type="text/javascript" src="/plugs/zyPopup/plug/DialogEffects/js/dialogFx.js"></script>
	<script type="text/javascript" src="/plugs/zyPopup/js/zyPopup.js"></script>
		
	<script type="text/javascript" src="/js/Sysrole.js"></script> 
	<!-- zyTable --> 
	
	<!-- css调用 -->
<link href="/css/bootstrap.min.css?v=3.4.0" rel="stylesheet">
<link href="/css/font-awesome.css?v=4.3.0" rel="stylesheet">
<link href="/css/morris-0.4.3.min.css" rel="stylesheet">
<!-- Gritter -->
<link href="/css/jquery.gritter.css" rel="stylesheet">
<link href="/css/animate.css" rel="stylesheet">
<link href="/css/style.css?v=2.2.0" rel="stylesheet">

<script type="text/javascript">

$(function() {
	// 初始化插件
	$(".table").table({
		"width"      : 500,
		"height"     : 250,
		"field"      : [{"id":"roleId", "name":"序号名", "width":170},{"id":"name", "name":"角色名", "width":170},{"id":"createTime", "name":"创建日期", "width":150}],
		//"adaptive"   : true, // 数据源字段自适应宽度方式
		"adaptive"   : false, // 数据源字段自适应宽度方式
		"pattern"    : false, // 模式   true:字段方式获取数据   false:普通添加方式获取数据
		"example"    : true,  // 实例   当前创建的是否是model中的实例
		"check"      : true,  // 全选
		"number"     : true,  // 序号
		"edit"       : true,  // 编辑
		"allAdd"	 : true,
		"del"        : true,  // 删除
		"allDel"     : true,  // 全部删除
		"filter"     : false,  // 过滤
		"paging"     : false,  // 分页条
		"zebra"      : true,  // 斑马线
		"dataTotal"  : 30,     // 数据总个数
		"rowsPerPage": 10,     // 一页多少行数据
		"pagingComplete": function(nNowPage){  // 翻页的回调方法

			console.info("用户定义翻页回调:");
			console.info(nNowPage);
			// 翻页添加数据
			var data = [];

			<c:forEach var="s" items="${sysroleInfos}">
				data.push({"roleId":"${s.roleId}","name":"${s.name}","createTime":"${s.createDateStr}"});
			</c:forEach>
			
			
			$(".table").table("addData", data);
		},
		"delComplete": function(aRowId){  // 删除数据的回调方法
			if(aRowId.length>0){
				 var datas=[];
				for(var i=0;i<aRowId.length;i++){
					datas.push(aRowId[i].roleId);
				}  
				alert("date="+datas);
				$.ajax({
					type:"post",
					url:"/Sysrole/del",
					traditional:true,
					data:{
						"dat":datas
					},
					success:function(data){
						$(".tips").text("提示:删除成功！");
						window.location.href="/Sysrole/show";
					},
					error:function(){
						
					}
				});
			} else{
				$.ajax({
					type:"get",
					url:"/Sysrole/del",
					data:{
						"dat":JSON.stringify(aRowId)
					},
					success:function(result){
						$(".tips").text("提示:删除成功！");
						window.location.href="/Sysrole/show";
					},
					error:function(){
						alert(123);
					}
				});
			} 
		
		
			console.info("用户定义删除回调:");
			console.info(aRowId);
		},
		"editComplete": function(afterData,beforeData){  //编辑数据的回调方法
			
			console.info("用户定义编辑回调:");
			console.info(afterData);
			console.info(beforeData);
			
		}
	});

	// 初始化添加数据
	var data = [];
	
	<c:forEach var="s" items="${sysroleInfos}">
		data.push({"roleId":"${s.roleId}","name":"${s.name}","createTime":"${s.createDateStr}"});
	</c:forEach>
	
	$(".table").table("addData", data);
	
	$.fn.zTree.init($(".rightInfo .content_wrap .zTreeDemoBackground #treeDemo"), setting, zNodes);
	/* $("#selectAll").bind("click", selectAll);  */
	$(".button").hover(function(){
		$(this).css("cursor","Pointer");
	});
	
	$(".dialog__content .dialog-content div[id*=editPopup_CreateTime]").find("input[type=text]").attr("readonly","readonly");
	$(".dialog__content .dialog-content div[id*=editPopup_ID]").find("input[type=text]").attr("readonly","readonly"); 		});

function search(){
	$("#pageNum").val(1);
	$('#userSearchForm').submit();
}

function goPage(pageNum){
	$("#pageNum").val(pageNum);
	$('#userSearchForm').submit();
}

</script>
<style type="text/css">
	.pagination{
		position:fixed;
		left:500px;
		top:450px;
	}

</style>

</head>

<body>
	<div id="wrapper" style="height:850px;">
		
		<!-- 左边导航 -->
		<%@ include file="../share/leftMenu.jsp" %>
				
		<div id="page-wrapper" class="gray-bg dashbard-1">
		<!-- 头部 -->
		<%@ include file="../share/head.jsp" %>

      <!--------------------------
        | 请将正文内部分写在这里 |
        -------------------------->
        <!-- 多条件查询+分页 -->
        <div class="box-header">
		<form id="userSearchForm" action="<%=basePath %>Sysrole/page" method="get">
			<label>角色名：</label><input type="text" value="${sysrole.sysName }" name="sysName" id="name">
			<label>创建时间</label><input type="date" value="${sysrole.beginDate}" name="beginDate" id="begin"/>--<input type="date" name="endDate" value="${sysrole.endDate}" id="begin"/>
			<input type="hidden" id="pageNum" name="pageNum" value="${funPage.pageNo}"/> 
		    <input type="button" value="查询" onclick="search()"/>
		</form>
		
	</div>
        
         <div class="staffInfo">
	    <article>
	       <div class="staffInfo">
	       		<!-- style控制zyTable最外层样式,如果需要改变宽度可以设置width -->
	           <div style="width:1100px;height:400px;position: absolute;margin-left:0%;margin-top:10px;">
					<div class="table"></div>
				</div>
	        	<div class="rightInfo">
	        		
				<div class="tips">
				<c:if test="${not empty message}">
					${message}
				</c:if>
				</div>
		        </div>
	      		</div>
	    </article>
        
        <!-- 分页 -->
         <div>
        	<ul class="pagination">
        					<c:if test="${funPage.pages<3 }">
        						<c:if test="${funPage.pages==1 && funPage.pageNo==1}">
	        						<c:forEach var="i" begin="1" end="1">
											<li class="paginate_button">
						                    <a href="javaScript:void(0)" 
						                    aria-controls="example2" data-dt-idx="${i}" tabindex="0" onclick="goPage(${i})">${i}</a></li>
					                 </c:forEach>
	        					</c:if>
	        					<c:if test="${funPage.pages==2 && funPage.pageNo==1}">
	        						 <c:forEach var="i" begin="1" end="2">
											<li class="paginate_button">
						                    <a href="javaScript:void(0)" 
						                    aria-controls="example2" data-dt-idx="${i}" tabindex="0" onclick="goPage(${i})">${i}</a></li>
					                 	</c:forEach>
				                 		<li class="paginate_button next" id="example2_next"><a
									href="javaScript:void(0)" aria-controls="example2" data-dt-idx="7" tabindex="0" onclick="goPage(${funPage.pageNo+1})">Next</a></li>
	        					</c:if>
	        					<c:if test="${funPage.pages==2 && funPage.pageNo==2}">
	        					<li class="paginate_button previous disabled"
									id="example2_previous"><a href="javaScript:void(0)" aria-controls="example2"
									data-dt-idx="0" tabindex="0" onclick="goPage(${funPage.pageNo-1})">Previous</a></li>
	        						<c:forEach var="i" begin="1" end="2">
											<li class="paginate_button">
						                    <a href="javaScript:void(0)" 
						                    aria-controls="example2" data-dt-idx="${i}" tabindex="0" onclick="goPage(${i})">${i}</a></li>
					                 	</c:forEach>
	        					</c:if>
        					</c:if>
        					<c:if test="${funPage.pages>=3 }">
	        					<c:if test="${funPage.pageNo==1}">
	        						<c:forEach var="i" begin="1" end="3">
											<li class="paginate_button">
						                    <a href="javaScript:void(0)" 
						                    aria-controls="example2" data-dt-idx="${i}" tabindex="0" onclick="goPage(${i})">${i}</a></li>
					                 	</c:forEach>
				                 		<li class="paginate_button next" id="example2_next"><a
									href="javaScript:void(0)" aria-controls="example2" data-dt-idx="7" tabindex="0" onclick="goPage(${funPage.pageNo+1})">Next</a></li>
	        					</c:if>
								<c:if test="${funPage.pageNo>1 && funPage.pageNo<=2 }">
									<c:if test="${funPage.pages<3}">
									<li class="paginate_button previous disabled"
									id="example2_previous"><a href="javaScript:void(0)" aria-controls="example2"
									data-dt-idx="0" tabindex="0" onclick="goPage(${funPage.pageNo-1})">Previous</a></li>
										<c:forEach var="i" begin="1" end="${funPage.pages}">
											<li class="paginate_button">
						                    <a href="javaScript:void(0)" 
						                    aria-controls="example2" data-dt-idx="${i}" tabindex="0" onclick="goPage(${i})">${i}</a></li>
					                 	</c:forEach>
				                 		<li class="paginate_button next" id="example2_next"><a
									href="javaScript:void(0)" aria-controls="example2" data-dt-idx="7" tabindex="0" onclick="goPage(${funPage.pageNo+1})">Next</a></li>
				                 	</c:if>
				                 	<c:if test="${funPage.pages>=3}">
										<li class="paginate_button previous disabled"
									id="example2_previous"><a href="javaScript:void(0)" aria-controls="example2"
									data-dt-idx="0" tabindex="0" onclick="goPage(${funPage.pageNo-1})">Previous</a></li>
										<c:forEach var="i" begin="1" end="3">
											<li class="paginate_button">
						                    <a href="javaScript:void(0)" 
						                    aria-controls="example2" data-dt-idx="${i}" tabindex="0" onclick="goPage(${i})">${i}</a></li>
					                 	</c:forEach>
				                 		<li class="paginate_button next" id="example2_next"><a
									href="javaScript:void(0)" aria-controls="example2" data-dt-idx="7" tabindex="0" onclick="goPage(${funPage.pageNo+1})">Next</a></li>
				                 	</c:if>
								</c:if>
								<c:if test="${funPage.pageNo>2 and funPage.pages>=(funPage.pageNo+1)}">
									<li class="paginate_button previous disabled"
									id="example2_previous"><a href="javaScript:void(0)" aria-controls="example2"
									data-dt-idx="0" tabindex="0" onclick="goPage(${funPage.pageNo-1})">Previous</a></li>
									<c:forEach var="i" begin="${funPage.pageNo-1 }" end="${funPage.pageNo+1 }">
									<li class="paginate_button"><a href="javaScript:void(0)" aria-controls="example2" data-dt-idx="${i}" tabindex="0" onclick="goPage(${i})">${i}</a></li>
					                 </c:forEach>
									<li class="paginate_button next" id="example2_next"><a
									href="javaScript:void(0)" aria-controls="example2" data-dt-idx="7" tabindex="0" onclick="goPage(${funPage.pageNo+1})">Next</a></li>
								</c:if>
								<c:if test="${funPage.pageNo==funPage.pages}">
									<li class="paginate_button previous disabled"
									id="example2_previous"><a href="javaScript:void(0)" aria-controls="example2"
									data-dt-idx="0" tabindex="0" onclick="goPage(${funPage.pageNo-1})">Previous</a></li>
									<c:forEach var="i" begin="${funPage.pageNo-1 }" end="${funPage.pages }">
									<li class="paginate_button"><a href="javaScript:void(0)" aria-controls="example2" data-dt-idx="${i}" tabindex="0" onclick="goPage(${i})">${i}</a></li>
					                 </c:forEach>
								</c:if>
							</c:if>
							
						</ul>
        </div> 
 <!-- 分页 -->
        
</div>
</div>
</div>
</body>
</html>